import React, { useRef } from "react";
import { useDispatch } from "react-redux";
import { add } from "../store/features/todosSlice";

export default function TodoAdd() {
  const inputRef = useRef();
  const dispatch = useDispatch();

  function handleAdd() {
    const value = inputRef.current.value.trim();

    if (!value) {
      return;
    }

    // 派发动作
    dispatch(add(value));
    // console.log(add(value));
  }

  return (
    <div>
      <h1>TodoAdd</h1>
      <input type="text" ref={inputRef} />
      <button onClick={handleAdd}>新增</button>
    </div>
  );
}
